<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <div v-if="configDebugger"
         class="debugger-page"
         @click="handleChangeSet">修改配置</div>
  </div>
</template>

<script>
import recalc from "./assets/js/recalc";
import config from "./base/profile/config";
import jsBridge from "../src/tools/jsBridge.js";
import localStorageClient from './js/localstorage'

export default {
  name: "app",
  data() {
    return {
      transitionName: "slide-left",
      configDebugger: config.debugger,
      animation: true
    };
  },
  methods: {
    checkDeviceModel() {
      let ua = navigator.userAgent;
      let iosVer = ua.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
      if (iosVer) {
        iosVer = iosVer[1].replace(/_/g, ".");
        //ios 12暂时去掉动画
        if (iosVer.split(".")[0] >= 12) {
          this.animation = false;
        }
      }
    },
    handleChangeSet() {
      this.$router.push({ path: "/testPage" });
    },
    async getUserInfo() {
      const result =  await this.ajax({
        url: "/newapp/merchantApp/index/queryUserData.do",
        type: "get",
        controlLoading: true
      }).catch(err => {});
      if (result.success) localStorageClient.putJSON("user", result.resultObject);
    },
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      // let toDepth = to.path.split("/").length;
      // let fromDepth = from.path.split("/").length;
      let fromMatch = from.path.match(/\/[a-zA-Z]/g);
      let toMatch = to.path.match(/\/[a-zA-Z]/g);
      let toDepth = toMatch ? toMatch.length : 0;
      let fromDepth = fromMatch ? fromMatch.length : 0;
      if (!this.animation) {
        this.transitionName = "";
      } else {
        if (!from.name) {
          this.transitionName = "";
        } else if (from.meta['InterimPage']||to.meta['InterimPage']) {//app跳转过来的需要h5处理逻辑的临时过渡页面
          this.transitionName = "";
        }
        else {
          if (from.path.length !== to.path.length) {
            this.transitionName =
              toDepth < fromDepth ? "slide-right" : "slide-left";
          } else {
            this.transitionName = "";
          }
        }
      }
    }
  },
  async mounted() {
    //this.checkDeviceModel();
    jsBridge.hideSplash();
    await this.getUserInfo()
  }
};
</script>
<style lang="scss">
@import "../src/style/reset";
body {
  /* 兼容 iOS < 11.2 */
  padding: constant(safe-area-inset-top)
    constant(safe-area-inset-right)
    constant(safe-area-inset-bottom)
    constant(safe-area-inset-left);
  /* 兼容 iOS >= 11.2 */
  padding: env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
.debugger-page {
  position: fixed;
  @include remCalc(font-size, 24);
  @include remCalc(width, 70);
  @include remCalc(height, 70);
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  @include remCalc(border-radius, 10);
  @include remCalc(left, 10);
  @include remCalc(top, 300);
  z-index: 10000;
  color: #fff;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.mint-loadmore {
  overflow: auto !important;
}
.mint-loadmore-top {
  @include remCalc(line-height, 88, !important);
  @include remCalc(margin-top, -88, !important);
  @include remCalc(height, 88, !important);
}
</style>
